<template>
	<view class="container">
		<!-- 背景花纹 -->
		<view class="bg-pattern"></view>
		
		<!-- 顶部用户信息 -->
		<view class="user-info-section">
			<!-- 用户信息 -->
			<view class="user-card">
				<view class="avatar-wrap">
					<image src="/static/icons/avatar.png" class="avatar-img"></image>
				</view>
				<view class="user-details">
					<view class="username">用户173829</view>
					<view class="user-id">ID: cfccbf31</view>
				</view>
			</view>
		</view>
		
		<!-- VIP提示 -->
		<view class="vip-card">
			<view class="vip-left">
				<image src="/static/icons/crown.png" class="crown-icon"></image>
				<text class="vip-text">开通会员每月享受10次免费问诊</text>
			</view>
			<view class="vip-btn">更多特权</view>
		</view>
		
		<!-- 灵豆区域 -->
		<view class="pet-bean-section">
			<view class="pet-bean-card">
				<view class="my-beans">
					<view class="bean-title">我的灵豆</view>
					<view class="bean-amount">
						<image src="/static/icons/bean.png" class="bean-icon"></image>
						<text class="bean-count">0</text>
						<text class="bean-arrow">></text>
					</view>
				</view>
				
				<view class="bean-task">
					<view class="task-image">
						<image src="/static/icons/gift.png" class="gift-img"></image>
					</view>
					<view class="task-info">
						<text class="task-title">灵豆任务</text>
						<text class="task-desc">做任务领奖励</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
			<!-- 问诊记录 -->
			<view class="function-item">
				<view class="function-icon">
					<image src="/static/icons/record.png" class="icon"></image>
				</view>
				<text class="function-text">问诊记录</text>
				<view class="function-arrow">
					<text>></text>
				</view>
			</view>
			
			<!-- 养宠助手 -->
			<view class="function-item">
				<view class="function-icon">
					<image src="/static/icons/assistant.png" class="icon"></image>
				</view>
				<text class="function-text">养宠助手</text>
				<view class="function-arrow">
					<text>></text>
				</view>
			</view>
			
			<!-- 商家合作 -->
			<view class="function-item">
				<view class="function-icon">
					<image src="/static/icons/cooperation.png" class="icon"></image>
				</view>
				<text class="function-text">商家合作</text>
				<view class="function-arrow">
					<text>></text>
				</view>
			</view>
			
			<!-- 意见反馈 -->
			<view class="function-item">
				<view class="function-icon">
					<image src="/static/icons/feedback.png" class="icon"></image>
				</view>
				<text class="function-text">意见反馈</text>
				<view class="function-arrow">
					<text>></text>
				</view>
			</view>
			
			<!-- 设置 -->
			<view class="function-item">
				<view class="function-icon">
					<image src="/static/icons/settings.png" class="icon"></image>
				</view>
				<text class="function-text">设置</text>
				<view class="function-arrow">
					<text>></text>
				</view>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @click="goToHome">
				<image src="/static/icons/home.png" mode="aspectFit"></image>
				<text>首页</text>
			</view>
			<view class="tab-item">
				<image src="/static/icons/community.png" mode="aspectFit"></image>
				<text>识别</text>
			</view>
			<view class="tab-item">
				<image src="/static/icons/message.png" mode="aspectFit"></image>
				<text>养宠</text>
			</view>
			<view class="tab-item active">
				<image src="/static/icons/profile-active.png" mode="aspectFit"></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我的'
			}
		},
		onLoad() {
		},
		methods: {
			goToHome() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 100rpx;
		position: relative;
	}
	
	.bg-pattern {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 400rpx;
		background-color: #FFAB00;
		/* background-image: url('/static/icons/pattern.png'); */
		background-repeat: repeat;
		background-size: 100rpx 100rpx;
		opacity: 0.3;
		z-index: 0;
	}
	
	/* 顶部用户信息区域 */
	.user-info-section {
		position: relative;
		padding: 40rpx 30rpx;
		z-index: 1;
	}
	
	.user-card {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.avatar-wrap {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 6rpx solid #fff;
		background-color: #f5f5f5;
		margin-right: 30rpx;
	}
	
	.avatar-img {
		width: 100%;
		height: 100%;
	}
	
	.user-details {
		color: #333;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	
	.user-id {
		font-size: 26rpx;
		color: #666;
	}
	
	/* VIP提示卡片 */
	.vip-card {
		margin: 0 30rpx;
		background-color: #FFF9E6;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 1;
		position: relative;
	}
	
	.vip-left {
		display: flex;
		align-items: center;
	}
	
	.crown-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	
	.vip-text {
		font-size: 26rpx;
		color: #333;
	}
	
	.vip-btn {
		background-color: #333;
		color: #fff;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}
	
	/* 灵豆区域 */
	.pet-bean-section {
		padding: 30rpx;
		z-index: 1;
		position: relative;
	}
	
	.pet-bean-card {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.my-beans {
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.bean-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.bean-amount {
		display: flex;
		align-items: center;
	}
	
	.bean-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	
	.bean-count {
		font-size: 36rpx;
		color: #FF9B3F;
		font-weight: bold;
	}
	
	.bean-arrow {
		margin-left: auto;
		color: #999;
		font-size: 24rpx;
	}
	
	.bean-task {
		padding: 30rpx;
		display: flex;
		align-items: center;
		background-color: #FFF9F3;
	}
	
	.task-image {
		margin-right: 20rpx;
	}
	
	.gift-img {
		width: 80rpx;
		height: 80rpx;
	}
	
	.task-info {
		flex: 1;
	}
	
	.task-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}
	
	.task-desc {
		font-size: 24rpx;
		color: #999;
	}
	
	/* 功能列表 */
	.function-list {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		z-index: 1;
		position: relative;
	}
	
	.function-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.function-item:last-child {
		border-bottom: none;
	}
	
	.function-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.function-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}
	
	.function-arrow {
		color: #ccc;
		font-size: 24rpx;
	}
	
	/* 底部导航栏样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid rgba(0,0,0,0.05);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 10;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 6rpx;
	}
	
	.tab-item image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
	}
	
	.tab-item text {
		font-size: 20rpx;
		color: #999;
	}
	
	.tab-item.active text {
		color: #FF9B3F;
	}
</style>
